<template>
    <div class="main">
        <div class="register">
            <a-form :form="form" @submit="createProject">
                <!--            手机号-->
                <a-form-item v-bind='formItemLayout' label="手机号">
                    <a-input name="phone" v-decorator="formRules.phone" placeholder="手机号即为登录账号"/>
                </a-form-item>
                <!--            验证码-->
                <a-form-item v-bind="formItemLayout" label="验证码">
                    <a-row>
                        <a-col :span="18">
                            <a-input name="captcha" v-decorator="formRules.captcha" placeholder="请输入验证码"/>
                        </a-col>
                        <a-col :span='6'>
                            <a-button>获取验证码</a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
                <!--            密码-->
                <a-form-item v-bind='formItemLayout' label="密码" class="password">
                    <a-input-password class="password" name="password" v-decorator="formRules.password"
                                      placeholder="6-20为字母或数字"/>
                </a-form-item>
                <!--            公司名称-->
                <a-form-item v-bind='formItemLayout' label="公司名称">
                    <a-input name="company" v-decorator="formRules.company" placeholder="请输入公司名称"/>
                </a-form-item>
                <!--            注册按钮-->
                <a-form-item v-bind="tailFormItemLayout">
                    <a-button type="primary" html-type="submit">注册</a-button>
                </a-form-item>
                <!--            用户协议/隐私策略-->
                <a-form-item v-bind="tailFormItemLayout">
                    <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                        我已阅读，并同意
                        <a href="">
                            《用户协议》
                        </a>和
                        <a href="">
                            《隐私策略》
                        </a>
                    </a-checkbox>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {},

        data() {
            return {
                confirmDirty: true,
                form: this.$form.createForm(this),
                formRules: {
                    phone: ["phone", {
                        rules: [
                            {required: true, message: "手机号为必填"},
                            {min: 11, max: 11, message: "请输入正确的手机号",}]
                    }],
                    captcha: ["captcha", {rules: [{required: false}]}],
                    password: ["password", {
                        rules: [
                            {required: true, message: "密码为必填"},
                            {min: 6, max: 30, message: "密码长度在6-30个字符之间",}]
                    }],
                    company: ["company", {rules: [{required: true, message: "公司名称为必填"}]}],
                },
                formItemLayout: {
                    labelCol: {
                        lg: {span: 4}, sm: {span: 17}
                    },
                    wrapperCol: {
                        lg: {span: 20}, sm: {span: 17}
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {span: 24, offset: 0,},
                        sm: {span: 16, offset: 8,},
                        lg: {span: 15, offset: 4},
                    },
                },
            }
        },
        methods: {

            //判断是否勾选了用户协议
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], {force: true});
                }
                callback();
            },

            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },

            createProject(e) {
                e.preventDefault();
                const {
                    form: {validateFields}
                } = this;
                validateFields((err, values) => {
                    if (!err) {
                        console.log(values);
                    }
                });
            }
        },
    }
</script>

<style lang="stylus" scoped>

    .main {
        width 480px
        margin 0 auto
    }


    .main >>> .ant-input,
    .main >>> .ant-btn,
    .main >>> .ant-form-item-required {
        padding-bottom 5px
        line-height 52px !important
        height 52px !important
        border-radius 0px !important
    }

    .main >>> .ant-btn-primary {
        width: 400px;
        line-height: 52px;
        text-align: center;
        font-size: 16px;
        border-radius: 2px;
        color: #fff;
        background: #2DA66A;
        border: none;
        cursor: pointer;
    }

    .agree .icon-check-square-fill {
        color: #2DA66A
    }

    .main >>> .ant-checkbox-wrapper + span,
    .main >>> .ant-checkbox + span {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12px;
    }

    .ant-form-explain {
        font-size 12px
    }
</style>